﻿<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <meta name="Author" content="Jenny.Zhan">
  <title>素材管理</title>
  <link rel="stylesheet" href="<{$ipath}>alipay/css/base.css">
  <link rel="stylesheet" href="<{$ipath}>alipay/css/layout.css">
  <link rel="stylesheet" href="<{$ipath}>alipay/css/multi.css">
</head>
<body>
	<div class="section-cont">
		<h1 class="fn-title">素材管理</h1>
		<div id="newmessage">
			<div class="add">+</div>
			<div class="typeselect">
				<a href="?g=alipay&m=fodder&a=single">单图文广播</a>
				<a href="?g=alipay&m=fodder&a=multi" class="multi">多图文广播</a>
			</div>
		</div>
		<div class="msg-container clearfix">

			<{foreach $fodder as $k => $v}>
			<div class="itemwrap clearfix">
				<div class="item div<{$k}>">
					<div class="message-item">
						<div class="message-body">
							<{foreach $v as $kk => $vv}>
							<a target="_blank" href="<{$basehost}>api/apmsgtext.php?userid=<{$vv.userid}>&id=<{$vv.id}>" class="item-url">
								<{if $kk eq 0}>
								<div class="message-title first-message-title"><div class="title-wrapper"><h4><{$vv.title}></h4><div class="title-bg"></div></div></div>
								<div class="message-info"><{$vv.time}></div>
								<div class="message-cover-pic" style="text-align:center;">
									<img src="<{$vv.img_url}>" class="cover" style="height: 100px;width: 260px;">
								</div>
								<{else}>
								<ul class="show-cont ui-sortable" id="J_showCont">
									<li id="item_<{$kk + 1}>" class="show-item fn-clear">
										<div class="cover-pic J_change_image" data-image="image" data-default="缩略图">
											<img src="<{$vv.img_url}>" />
										</div>
										<h1 class="show-title title-break J_change_title" data-title="title" data-default="标题">
											<{$vv.title}>
										</h1>
									</li>
								</ul>
								<{/if}>
								<{if $vv.type eq 1}>
								<div class="message-text word-bread"><{$vv.abstract}></div>
								<span class="view">立即查看</span>
								<{/if}>
							</a>

							<{/foreach}>
						</div>
					</div>
					<div class="control">
						<!--<a href="">发送</a>-->
						<a href="?g=alipay&m=fodder&a=edit&msgid=<{$k}>">编辑</a>
						<a href="javascript:;" class="lst" onclick="redel(<{$k}>)">删除</a>
					</div>
				</div>
				</div>
			<{/foreach}>
		</div>
		<div class="clearfix">
			<!--<{$pagestr}>-->
            <!--<ul class="pagination pull-left" style="margin-right: 15px;">
                <li><a>共24页</a></li>
                <li><a>每页3条</a></li>
            </ul>
            <ul class="pagination pull-left">
                <li><a class="pointer">首页</a></li>
                当前页class="active"
                <li class="active"><a class="ng-binding">1 <span class="sr-only"></span></a></li>
                <li><a>2 <span class="sr-only"></span></a></li>
                <li><a>3 <span class="sr-only"></span></a></li>
                <li><a>4 <span class="sr-only"></span></a></li>
                <li><a class="pointer" title="尾页">尾页</a></li>
            </ul>-->
		</div>
	</div>
	<script src="<{$ipath}>public/js/jquery.js" type="text/javascript"></script>
	<script type="text/javascript">
		function redel(oid){
			var url = '?g=alipay&m=fodder&a=dele';
			var r=confirm("确定要删除？");

			if (r==true)
			{
				$.post(url, {msgid: oid}, function(data){
					if(data.status)
					{
						//alert(oid);
						$(".div"+oid).remove();

					}
				},'json');
			}
		}
	    $("#newmessage").hover(function(){
	        $(this).find(".add").hide();
	        $(this).find(".typeselect").show();
	    },function(){
	        $(this).find(".add").show();
	        $(this).find(".typeselect").hide();
	    });


		//流布局
		PBL(".msg-container",".itemwrap",2);
		function PBL(outer,boxs,style){
			//outer父级元素、boxs子级元素，style加载样式（ 1或者2 ）
    var pubu = $(outer);
    var box = $(boxs);
    var num = Math.floor($(document.body).width()/box.outerWidth());//根据浏览器宽度获得显示的列的数量
    pubu.width(num*(box.outerWidth()));//给pubu的宽度赋值
    var allHeight = [];//定义一个数组存储所有列的高度
    for(var i=0;i<box.length;i++){
        if (i<num) {
            allHeight[i]=box.eq(i).outerHeight();
        }else{
            var minHeight = Math.min.apply({},allHeight);//获得所有的列中高度最小的列的高度
            var sy = getSy(minHeight,allHeight);//获取高度最小的列的索引
            getStyle(box.eq(i),minHeight,sy*box.eq(i).outerWidth(),i,style);
            allHeight[sy] += box.eq(i).outerHeight();
			pubu.height(minHeight+box.eq(i).outerHeight()+30);
        }
    }
	
}

var getStartNum = 0;
//获取高度最小的列的索引
function getSy(minH,allH){
    for(sy in allH){
        if(allH[sy]==minH) return sy;
    }
}
function getStyle(boxs,top,left,index,style){
    if (getStartNum>=index) {
        return;
    }
    boxs.css("position","absolute");
    switch(style){
        case 1:
            boxs.css({
                "top":top+$(window).height(),
                "left":left
            });
            boxs.stop().animate({
                "top":top,
                "left":left
            },999);
        break;
        case 2:
            boxs.css({
                "top":top,
                "left":left,
                "opacity":"0"
            });
            boxs.stop().animate({
                "opacity":"1"
            },999);
    }
    getStartNum = index;//更新请求数据的条数位置
}
	</script>
</body>
</html>